<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>x3d Meshes</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      x3d Mesh support
      <a href="https://3d.nih.gov/discover?q=brain&sort=relevant"
        >NIH 3D Print Exchange</a
      >
      <label for="check10">HighDPI</label>
      <input type="checkbox" id="check10" checked />
      <label for="check11">MeshXRay</label>
      <input type="checkbox" id="check11" checked />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaders">Shaders: </label>
    </footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js";
  
  document.getElementById("check10").addEventListener("change", doCheck10Click);
  function doCheck10Click() {
    nv1.setHighResolutionCapable(this.checked);
  }
  document.getElementById("check11").addEventListener("change", doCheck11Click);
  function doCheck11Click() {
    nv1.opts.meshXRay = Number(this.checked) * 0.02;
    nv1.drawScene();
  }
  var nv1 = new niivue.Niivue({
    backColor: [0.9, 0.9, 0.9, 1],
  });
  nv1.setSliceType(nv1.sliceTypeRender);
  await nv1.attachTo("gl1");
  nv1.loadMeshes([
    {
      url: "../images/MolView-sticks-color_38.x3d",
      rgba255: [222, 164, 164, 255],
    },
  ]);
  nv1.setClipPlane([-0.1, 270, 0]);
  document.getElementById("check10").checked = nv1.opts.forceDevicePixelRatio === 0;
  document.getElementById("check11").checked = nv1.opts.isMeshXRay;
  let cmaps = nv1.meshShaderNames();
  let cmapEl = document.getElementById("shaders");
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = cmaps[i];
    btn.onclick = function () {
      nv1.setMeshShader(nv1.meshes[0].id, cmaps[i]);
    };
    cmapEl.appendChild(btn);
  }
</script>
